iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Modern Web

Angular 微前端實戰 module federation with nx monorepo系列 第 4

Day 4 為什麼選擇使用NX monorepo

  • 分享至 

  • xImage
  •  

很喜歡前輩說過的一句話
任何架構與設計模式 都是為了解決問題

那麼 在既有專案架構下 為什麼要改為Nx monorepo的架構呢?
原因就在於在實作micro frontend時 許多情境狀態必須是共享的

情境
web A 透過module federation 使用 web B的某個module
但這個module 需要取得所在的web登入者狀態
白話文:取得singleton的instance而不是在web A使用web B時又再new instance

nx monorepo
為了解決共享state的問題
且避免重複的程式碼造成維護上的困擾
透過nx monorepo抽出共用的library
再分別import進各自獨立的專案
達到在web A使用web B元件 且取得的是當下web的state

優點
nx monorepo + module federation 有一套完整的解決方案

缺點
抽出的library與各個專案耦合
故在設計的時候 根據solid原則
需要想清楚什麼該抽出什麼不要

之後在demo code時再補上這段程式碼
下集預告:module dederation 介紹


上一篇
Day 3 常見的幾種Micro Frontend Library
下一篇
Day 5 module dederation 介紹
系列文
Angular 微前端實戰 module federation with nx monorepo8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言